<script setup>
import { getCurrentInstance, ref } from 'vue';
import { isNumber, isPhoneNumber, dbNavPage } from '../../utils';
import request from '../../utils/cloudobjRequest';
const form = ref({
	phone: '18846825524',
	password: ''
});
const agree = ref(false);
const safecode_waiting = ref(0);
const safecode_runing = ref(null);
const userApi = uniCloud.importObject('systemUser', {
	customUI: true, // 是否取消自动展示的交互界面。默认为false，配置为true时取消自动展示的交互提示界面，以下配置均不再生效
	loadingOptions: {
		// loading相关配置
		title: '加载中...', // 显示的loading内的提示文字。默认值为：加载中...
		mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
	},
	errorOptions: {
		// 错误界面相关配置
		type: 'modal', // 错误信息展示方式，可取值：modal（弹框，默认）、toast（toast消息框）。默认值为：modal
		retry: false // 是否展示重试按钮，仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法，默认为false
	},
	parseSystemError({
		// 转化云对象内未捕获的错误，或客户端网络错误
		objectName, // 云对象名
		methodName, // 方法名
		params, // 调用方法时传的参数，注意params是一个数组
		errCode, // 请求返回的错误码
		errMsg // 请求返回的错误信息
	} = {}) {
		return {
			errMsg: '系统错误，请稍后再试' // 用于展示的错误信息
		};
	}
});
const proxy = getCurrentInstance().proxy;

function submit() {
	if (!agree.value) {
		uni.showToast({
			title: '请想阅读协议',
			icon: 'error'
		});
		return;
	}
	if (!isPhoneNumber(form.value.phone)) {
		uni.showToast({
			title: '请填写正确手机号',
			icon: 'error'
		});
		return;
	}
	if (!form.value.password.trim()) {
		uni.showToast({
			title: '请添加密码',
			icon: 'error'
		});
		return;
	}
	request('systemUser', 'login', form.value).then((res) => {
		console.log('我请求回来的数据res', res);
	});

	return;
	if (!isPhoneNumber(form.value.phone)) {
		uni.showToast({
			title: '请填写正确手机号',
			icon: 'error'
		});
		return;
	}
}

const safecode_get = () => {
	if (safecode_waiting.value > 0) return;
	if (!isPhoneNumber(form.value.phone)) {
		uni.showToast({
			title: '请填写正确手机号',
			icon: 'error'
		});
	}

	safecode_waiting.value = 60;
	safecode_runing.value = setInterval(() => {
		if (safecode_waiting.value > 0) {
			safecode_waiting.value--;
		} else {
			if (safecode_runing.value) clearInterval(safecode_runing.value);
		}
	}, 1000);
};
</script>

<template>
	<view class="page" style="background-color: #fff">
		<view class="top">
			<view class="h1">您好，</view>
			<view class="h1">欢迎使用聚途网络</view>
			<image src="../../static/home/car.png" mode=""></image>
		</view>
		<view class="flex-1 main">
			<m-input v-model="form.phone" label="手机号" type="phone">
				<!-- 		<view style="width: 140rpx; text-align: center; color: #5a9af0" @click.native.stop="safecode_get" class="code">
					{{ safecode_waiting > 0 ? safecode_waiting + 's' : '立即获取' }}
				</view> -->
			</m-input>
			<m-input v-model="form.password" label="密码"></m-input>

			<button class="but" @click="submit">登录</button>
			<view class="info" @click="dbNavPage('/pages/login/register')">注册</view>
		</view>
		<view class="flex-c-c" style="margin-bottom: 68rpx">
			<image v-if="!agree" mode="scaleToFill" src="/static/icon/no-agree.png" style="width: 31rpx; height: 31rpx" @click="agree = !agree" />
			<image v-if="agree" mode="scaleToFill" src="/static/icon/agree.png" style="width: 31rpx; height: 31rpx" @click="agree = !agree" />
			<text style="margin-left: 10rpx; font-size: 25rpx; color: #b0b0b0">我已经阅读并统一</text>
			<text :style="{ color: '#1686ff' }">用户服务协议、</text>
			<text :style="{ color: '#1686ff' }">隐私政策</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.top {
	height: 550rpx;
	width: 100vw;
	box-sizing: border-box;
	background: linear-gradient(to right, #1686ff, #00bfff);
	padding-top: 200rpx;
	padding-left: 40rpx;
	color: #fff;
	font-size: 42rpx;
	font-weight: 600;
	position: relative;
	image {
		position: absolute;
		top: 210rpx;
		right: 80rpx;
		padding: 20rpx;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: 2px solid #fff;
	}
}

.main {
	width: 100vw;
	height: calc(100vh - 450rpx);
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	padding-top: 60rpx;
	margin-top: -100rpx;
	z-index: 22;
	border-radius: 30rpx;
}

.but {
	background: linear-gradient(to right, #1686ff, #0ca1ff);
	color: #fff;
}

.info {
	color: gray;
	text-align: center;
	margin-top: 20rpx;
}

.code {
}
</style>
